<template>
    <!-- 最外层大盒子 -->
    <div class="login_box">
        <div class="container">
            <!-- 表格盒子 -->
            <div class="form-box">
                <!-- 注册表格盒子 -->
                <div class="register-box hidden">
                    <h1>register</h1>
                    <input type="text" name="用户名" placeholder="用户名" v-model="loginFrom.username" />
                    <input type="email" name="邮箱" placeholder="邮箱" v-model="loginFrom.email" />
                    <input type="password" name="密码" placeholder="密码" v-model="loginFrom.password" />
                    <input type="password" name="确认密码" placeholder="确认密码" v-model="loginFrom.confirmPawword" />
                    <button>注 册</button>
                </div>
                <!-- 登录表格盒子 -->
                <div class="login-box">
                    <h1>login</h1>
                    <input type="text" name="用户名" placeholder="用户名" v-model="loginFrom.username" />
                    <input type="password" name="密码" placeholder="密码" v-model="loginFrom.password" />
                    <button @click="loginEvent">登 录</button>
                </div>
            </div>
            <!-- （注册对应内容页）去登陆 -->
            <div class="con-box left">
                <h2>欢迎来到<span>前端星球</span></h2>
                <p>快来开启你的<span>设计</span>旅程吧</p>
                <img src="@/assets/images/image1.png" alt="注册">
                <p>已有账号</p>
                <button id="login">去登录</button>
            </div>
            <!--（登录对应内容页）去注册 -->
            <div class="con-box right">
                <h2>欢迎来到<span>前端星球</span></h2>
                <p>提升你的<span>设计·编程</span>能力</p>
                <img src="@/assets/images/image2.png" alt="登录">
                <p>没有账号？</p>
                <button id="register">去注册</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
// 引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router';


let $router = useRouter()
let useStore = useUserStore()


let loginFrom = reactive({
    username: 'admin',
    password: '111111',
    confirmPawword: '111111',
    email: '12345678@qq.com',
})
onMounted(() => {
    // 获得两个按钮
    let register = document.getElementById('register');
    let login = document.getElementById('login');
    let formBox = document.getElementsByClassName('form-box')[0];
    let registerBox = document.getElementsByClassName('register-box')[0];
    let loginBox = document.getElementsByClassName('login-box')[0];

    register?.addEventListener('click', () => {
        // 表格盒子向右平移
        formBox.style.transform = 'translateX(100%)';
        loginBox.classList.add('hidden');
        registerBox.classList.remove('hidden');
    })

    login?.addEventListener('click', () => {
        // 表格盒子恢复最左侧状态
        formBox.style.transform = 'translateX(0%)';
        registerBox.classList.add('hidden');
        loginBox.classList.remove('hidden');
    })
})

function loginEvent(){
    console.log('login', useStore.token);
    $router.push('/')
}
</script>

<style scoped lang="scss">
.login_box {
    width: 100%;
    /* 也就是100% 被子元素完全撑开 */
    height: 100%;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    /* body中的盒子垂直居中*/
    justify-content: center;
    /* body中的盒子水平居中*/
    align-items: center;
    /* 渐变轴为 45 度，从蓝色渐变到红色 */
    background: linear-gradient(45deg, rgba(129, 248, 250, 0.655), rgba(248, 144, 217, 0.811));

    .con-box img {
        width: 160px;
    }

    .container {
        background-color: #fff;
        width: 620px;
        height: 400px;
        border-radius: 10px;
        /* 阴影 */
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
        /* 相对定位 */
        position: relative;
    }

    .form-box {
        /* 绝对定位 */
        position: absolute;
        /* 上面突出来一小节 */
        top: -12px;
        left: 10px;
        background-color: rgb(255, 205, 219);
        width: 300px;
        height: 424px;
        border-radius: 10px;
        box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.1);
        /* 弹性布局 */
        display: flex;
        /* 内容水平居中显示 */
        align-items: center;
        transition: 1s ease-in-out;
        z-index: 2;
    }

    .register-box,
    .login-box {
        /* 弹性布局 */
        display: flex;
        /* 决定伸缩盒子内的项目排列方式 垂直排列 主轴为垂直方向 */
        flex-direction: column;
        /* 中点对齐 */
        align-items: center;
        width: 100%;
    }

    .hidden {
        display: none;
    }

    /* 标题 */
    h1 {
        text-align: center;
        margin-bottom: 25px;
        /* 转换为大写 */
        text-transform: uppercase;
        color: #fff;
        /* 设置字间距 */
        letter-spacing: 3px;
    }

    input {
        /* 将输入框背景改为透明 */
        background-color: transparent;
        width: 70%;
        color: #fff;
        border: none;
        border-bottom: 1.5px solid #fff;
        /* height: 32px; */
        margin: 10px;
        border-radius: 6px;
        padding: 10px 4px;
        font-size: 14px;

    }

    /* 将输入框中的占位字改为白色 */
    input::placeholder {
        color: #fff;
    }

    /* 当输入框被选中时 */
    input:focus {
        color: rgb(222, 142, 165);
        /* 不要默认的选中框 */
        outline: none;
        border-bottom: 2.5px solid rgba(222, 142, 165, 0.662);
    }

    /* 当选中该输入框时 里面的文字消失 */
    input:focus::placeholder {
        opacity: 0;
    }

    /* 渲染注册/登录按钮 */
    .form-box button {
        margin-top: 20px;
        width: 70%;
        height: 40px;
        background: #f6f6f6;
        font-size: 15px;
        font-weight: 700;
        color: rgb(222, 142, 165);
        /* 不要边框 */
        border: none;
        border-radius: 8px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
        /* 当鼠标悬浮在按钮上时 变为指针手势 */
        cursor: pointer;
    }

    /* 鼠标悬浮在按钮上时 背景&字体颜色改变 并且有0.5秒的过渡 */
    .form-box button:hover {
        background: rgb(222, 114, 145);
        color: #f3f3f3;
        transition: 0.5s ease;
    }

    .con-box {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 绝对定位 */
        position: absolute;
        top: 50%;
        /* css3  将盒子进行平移操作 向y轴负方向也就是上方 平移半个盒子高度距离*/
        transform: translateY(-50%);
        /* 这两个操作实现盒子的水平居中 */
    }

    .con-box.left {
        left: 0%;
    }

    .con-box.right {
        right: 0%;
    }

    .con-box * {
        margin-top: 10px;
    }

    .con-box h2 {
        color: rgb(154, 154, 154);
        letter-spacing: 3px;
        text-align: center;
    }

    .con-box h2 span {
        color: rgba(232, 134, 162, 0.87);
        letter-spacing: 3px;
        text-align: center;
    }

    .con-box p {
        color: rgb(154, 154, 154);
        letter-spacing: 1px;
        text-align: center;
        font-weight: 500;
    }

    .con-box span {
        font-weight: 700;
    }

    .con-box img {
        width: 160px;
        /* 之前写过 现在加上这两行即可 */
        /* 设置透明度 */
        opacity: 0.9;
        margin: 20px 0;
    }

    .con-box button {
        margin-top: 12px;
        background-color: #fff;
        margin-top: 20px;
        width: 30%;
        height: 30px;
        background: #f6f6f6;
        font-size: 13px;
        font-weight: 600;
        color: rgb(222, 142, 165);
        border: none;
        outline: none;
        border-radius: 8px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .con-box button:hover {
        background: rgba(222, 114, 145, 0.687);
        color: #f3f3f3;
        transition: 0.5s ease;
    }
}
</style>